<!--  -->
<template>
  <div class="big_box">
    <el-card class="box-card" style="height: 120px;">

      <div class="box-card-top">
        <div class="box_left">
          <div>
            <el-icon>
              <Tickets />
            </el-icon>
          </div>
          <div>
            筛选搜索
          </div>
        </div>
        <div>
          <el-button type="primary" @click="search_list" class="top_button">查询结果</el-button>
        </div>
      </div>


      <div class="box-card-down">
        <span style="font-size: 14px;">输入搜索：</span>
        <input class="search_box" type="text" placeholder="品牌名称/关键字" v-model="input_text">
      </div>



    </el-card>



    <el-card class="box-card">
      <div class="box_in">
        <div class="box_left">
          <div>
            <el-icon>
              <Tickets />
            </el-icon>
          </div>
          <div>
            数据列表
          </div>
        </div>
        <div>
          <el-button type="primary" class="top_button">填加</el-button>
        </div>
      </div>
    </el-card>

    <!-- 品牌管理列表数据 -->

    <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" :border=true>
      <el-table-column type="selection" width="60" />
      <el-table-column label="编号" width="120" property="id">
      </el-table-column>
      <el-table-column property="name" label="品牌名称" width="300" />
      <el-table-column property="firstLetter" label="品牌首字母" width="170" />
      <el-table-column property="sort" label="排序" width="120" />

      <el-table-column label="品牌制造商" width="100">
        <template #default="scope">
          <el-switch @click="change_factoryStatus(scope.row.id, scope.row.factoryStatus ? 0 : 1)"
            :value="scope.row.factoryStatus === 1 ? true : false" />
        </template>
      </el-table-column>
      <el-table-column label="是否显示" width="100">
        <template #default="scope">
          <el-switch @click="change_showStatus(scope.row.id, scope.row.showStatus ? 0 : 1)"
            :value="scope.row.showStatus === 1 ? true : false" />
        </template>
      </el-table-column>

      <el-table-column label="相关" width="300">
        <p>商品:<span style="color: #4d4dff;">100</span>评价:<span style="color: #4d4dff;">1000</span></p>
      </el-table-column>>

      <el-table-column label="操作" width="200">
        <template #default="scope">
          <el-button size="small" type="primary" @click="updateBrand(scope.row.id)">编辑</el-button>
          <el-button size="small" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页器 -->
    <div class="bottom_line">
      <div class="bottom_line_left">
        <div>
          <el-select v-model="value" class="m-2" placeholder="批量操作">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div>
        <div>
          <el-button class="bottom_line_left_button" size="large" type="primary">确定</el-button>
        </div>

      </div>
      <div>
        <el-pagination v-model:currentPage="pagination.pageNum" v-model:page-size="pagination.pageSize"
          :page-sizes="[1, 5, 10, 20]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>

    </div>


  </div>




</template>

<script lang='ts' setup>
import { Tickets } from "@element-plus/icons-vue";
import { reactive, toRefs, ref } from 'vue'
import useTable from "@/hooks/useTable"
import * as api from "@/request/api"
import { useRouter,useRoute } from "vue-router";
import 'element-plus/es/components/message/style/css'
import 'element-plus/es/components/message-box/style/css'



const value = ref('')
let router=useRouter()
let route =useRoute()

const options = [
  {
    value: 'Option1',
    label: '显示品牌',
  },
  {
    value: 'Option2',
    label: '隐藏品牌',
  }
]
let {
  tableData,
  pagination,
  handleCurrentChange,
  handleSizeChange,
  getTableData
} = useTable(api.product.BrandList)

//更改品牌制造商
let change_factoryStatus = async (id: any, status: any) => {
  let form = new FormData()
  form.append('ids', id)
  form.append('factoryStatus', status)
  await api.product.updateFactoryStatus(form)
  getTableData()

}
//更改品牌显示状态
let change_showStatus = async (id: any, status: any) => {
  let form = new FormData()
  form.append('ids', id)
  form.append('showStatus', status)
  await api.product.updateBrandShowStatus(form)
  getTableData()
}



//品牌列表查询搜索
let input_text = ref('')
let search_list = async () => {
  let result = await api.product.brandSearchList({
    keyword: input_text.value,
    pageNum: pagination.pageNum,
    pageSize: pagination.pageSize,
  })
  tableData.value = result.list
}


//编辑品牌
let updateBrand=(id)=>{
  router.push(`updateBrand?id=${id}`)
}

















</script>
<style lang='less' scoped>
.big_box {
  padding: 20px;
}

.box-card {
  border: 1px solid #fff;
  margin-bottom: 20px;
}

.box-card-top {
  display: flex;
  justify-content: space-between;
}

.box_in {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.box_left {
  display: flex;
}

.bottom_line {
  margin-top: 10px;
  height: 50px;
  display: flex;
  justify-content: space-between;
}

.bottom_line_left {
  display: flex;
}

.bottom_line_left_button {
  height: 33px;
  margin-left: 10px;
}

:deep .cell {
  text-align: center;
}

.box-card-down {
  margin-left: 50px;
}

.search_box {
  border: 1px solid #ccc;
  width: 200px;
  height: 25px;
  outline: none;
}


/deep/ .el-table__header {
  width: 100% !important;
}


/deep/ .el-table__body {
  width: 100% !important;
}
</style>